<template>
  <div class="divisional">

    <!-- 查询 -->
    <div class="search_box" style="width: 95%;">
      <el-row :gutter="30">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" ref="searchFormRef">
          <el-col :span="6">
            <el-form-item label="所属银行" prop="bank">
              <el-input v-model="searchForm.bank" size="small" placeholder="所属银行"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号" prop="sfzh">
              <el-input v-model="searchForm.sfzh" size="small" placeholder="身份证号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="searchForm.name" size="small" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="6">
            <el-form-item label="手机号" prop="sjh">
              <el-input v-model="searchForm.sjh" size="small" placeholder="手机号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="失联原因" prop="slyy">

              <el-select v-model="searchForm.slyy" placeholder="失联原因" size="small">
                <el-option label="已还款" value="shanghai"></el-option>
                <el-option label="已身故" value="beijing"></el-option>
              </el-select>
            </el-form-item>


          </el-col>


          <div align="right" style="padding-right: 36px;">

            <el-button type="primary" size="small" @click="onSubmitSearch">查询</el-button>
            <el-button type="primary" size="small" @click="onSubmitInsert">录入</el-button>
            <el-button type="primary" size="small" @click="restSearchForm()">重置</el-button>
          </div>
        </el-form>
      </el-row>
    </div>


    <!-- 列表展示页面 -->
    <el-table :header-cell-style="{background:'LightYellow	',color:'black'}" :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">

      <el-table-column label="序号" type="index">
      </el-table-column>

      <el-table-column label="姓名" prop="name">
      </el-table-column>


      <el-table-column label="信用卡号" prop="ajh" :formatter="hidInfo">
      </el-table-column>


      <el-table-column label="所属银行" prop="ssyh">
      </el-table-column>

      <el-table-column label="信用卡号" prop="xykh" :formatter="hidInfo">
      </el-table-column>

      <el-table-column label="身份证号" prop="sfzh">
      </el-table-column>

      <el-table-column label="失联原因" prop="slyy">
      </el-table-column>


      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 15,20]" :page-size="pageSize" :total="total" layout="total, sizes, prev,pager, next, slot, jumper">
      </el-pagination>
    </div>

    <!-- 失联详情 数据-->
    <!-- <el-dialog title="详情信息" :visible.sync="outerVisible" width="40%"> -->
    <!-- <el-dialog title="提示" :visible.sync="outerVisible" width="30%" :before-close="handleClose"> -->

    <el-dialog title="详情信息" :visible.sync="DetailsDialog">
      <el-form ref="DetailsForm" :model="Detailsform" label-width="80px">

        <el-divider content-position="left">基本信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="案件流水">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-divider content-position="left">卡片信息</el-divider>

          <el-col :span="12">
            <el-form-item label="卡号">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="账单日">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开户日期">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开户机构">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">财务信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="账户状态">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="逾期期数">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="减免额度">
              <el-input v-model="Detailsform.ed" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="逾期天数">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="减免金额">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="其他费用">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="手续费">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="违约金">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="利息">
              <el-input v-model="Detailsform.name" :disabled="true" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

    </el-dialog>



    <!-- 录入-->
    <el-dialog title="详情信息 Dialog" :visible.sync="InsertDialog">
      <el-form ref="form" :model="Insertform" label-width="80px">
        <el-divider content-position="left">基本信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="案件流水">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-divider content-position="left">卡片信息</el-divider>

          <el-col :span="12">
            <el-form-item label="卡号">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="账单日">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开户日期">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开户机构">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">财务信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="账户状态">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="逾期期数">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="减免额度">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="逾期天数">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="减免金额">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="其他费用">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="手续费">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="违约金">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="利息">
              <el-input v-model="Insertform.name" placeholder="内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" @click="onSubmitGotoInsert">立即录入</el-button>
              <el-button @click="InsertDialog = false">取消录入</el-button>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        InsertDialog: false,
        DetailsDialog: false,
        Detailsform: {},
        searchForm: {},
        Insertform: {},
        search: '',
        tableData: [{
            slyy: '已拘留',
            ssyh: '兴业银行',
            xykh: 'U9878',
            sfzh: '130627199708121214',
            ajh: '13160351602',
            name: '小李'
          },
          {
            slyy: '已身故',
            ssyh: '中信银行',
            xykh: 'U9878',
            sfzh: '130627199708121214',
            ajh: '1316035161202',
            name: '小赵'
          },
        ],
      }
    },
    methods: {

      restSearchForm() {
        this.$refs.searchFormRef.resetFields();
      },
      onSubmitInsert() {
        this.InsertDialog = true;
      },
      onSubmitGotoInsert() {
        console.log("走接口");
      },
      onSubmitSearch() {
        console.log("点击查询按钮");
      },
      handleEdit(index, row) {
        console.log("打开详情对话框");
        this.DetailsDialog = true;
        console.log("回显数据");
        this.Detailsform = row;
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
</script>
<style lang="scss" scoped>
  .divisional {
    /deep/ .el-row:nth-child(1) {
      width: 100%;
      height: 1px;
      // background: pink;
      padding: 0;
      margin: 0;

      .el-col {
        padding: 0;
        height: inherit;
        /* border: 1px solid slategrey; */
        box-sizing: border-box;
        overflow: hidden;

        div:nth-child(1) {
          width: 100%;
          height: inherit;
          //   background: yellowgreen;
          display: flex;
          flex-wrap: wrap;
          // justify-content: flex-start;
          justify-content: space-around;
          box-sizing: border-box;
          /* padding-left: 30px;
           padding-top: 40px; */
          overflow-y: auto;

          .v_box {
            width: 20%;
            height: 8vh;
            margin-left: 15px;
            margin-right: 40px;
            // margin-bottom: 10px;
            // background: chocolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: none;

            div {
              padding: 0;
            }

            &:nth-child(7) {

              .el-date-editor--daterange.el-input,
              .el-date-editor--daterange.el-input__inner,
              .el-date-editor--timerange.el-input,
              .el-date-editor--timerange.el-input__inner {
                width: 100%;
              }
            }

            &:last-child {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;

              .el-button {
                width: 70px;
                height: 30px;

                &:first-child {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }

    /deep/ .el-row:nth-child(2) {
      width: 100%;
      /* height: 60vh; */
      // background: pink;
      padding: 0;
      margin: 0;
      margin-top: 10px;

      table {
        tbody {
          tr {
            td {
              .cell {
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal !important;
                line-height: inherit;
                //   padding-right: 10px;
              }
            }
          }
        }
      }
    }

    .pageBox {
      display: flex;
      width: 100%;
      justify-content: left;
      margin-top: 10px;
    }


    /deep/ .el-dialog {
      .mainInfoBox {
        width: 100%;
        max-height: 60vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 30%;

          label {
            width: 100px;
          }

          .el-input {
            flex: 1 1 auto;
          }
        }
      }
    }
  }


  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 40px 40px 175px 40px;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }

  .search_box .inpText {
    width: 75px;
    justify-content: space-between;
    text-align: right;
    display: inline-block;
  }
</style>
